{% load static %}
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %}</title>
    <link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" href="{% static 'icons/iconfont.css' %}">
    {#  自定义 head  #}
    {% block head %}{% endblock %}
</head>
<body class="d-flex flex-row">
{# 导航栏 #}
<div class="sidebar d-flex flex-column flex-shrink-0 px-3 py-2 bg-body-tertiary">
    <a href="/" class="text-center text-success fw-bold link-body-emphasis text-decoration-none">
        <span class="fs-4">Django Admin</span>
    </a>
    <hr class="mt-2">
    <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
            <a href="/" class="nav-link {% if request.resolver_match.url_name == 'index' %}active{% endif %}" aria-current="page">
                <i class="iconfont icon-home"></i>
                Dashboard
            </a>
        </li>
        <li>
            <a href="/about" class="nav-link link-body-emphasis {% if request.resolver_match.url_name == 'about' %}active{% endif %}">
                <i class="iconfont icon-phone"></i>
                About
            </a>
        </li>
    </ul>
    <hr>
    <div class="">
        // Todo
    </div>
</div>
<div class="flex-grow-1">
    <header class="bg-body-tertiary"></header>
    {# 页面内容 #}
    <main class="container-fluid p-2">
        {% block main %}{% endblock %}
    </main>
</div>


{# 引入 javascript #}
<script src="{% static 'bootstrap/js/bootstrap.bundle.js' %}" crossorigin="anonymous"></script>
{% block script %}{% endblock %}
</body>
</html>